// 首页轮播图
var num = 0;
function autoMove(){
	num++;
	$("#middle").delay(2500);
	$("#middle").animate({
	  marginLeft:-100*num+"%"
	},500,"linear",function(){
		if(num>4){
			num = 0
			$("#middle").css("margin-left",0)
		}
		$("#btn>li").eq(num).attr("class","bianse").siblings().attr("class","");
		autoMove()
	})
}
autoMove();

$("#btn").on("click","li",function(){
	$("#middle").stop()
	$("#middle").stop()
	num = $(this).index()
	$("#middle").animate({
		marginLeft:-100*num+"%"
	},500,"linear",function(){
		autoMove()
	})
	$("#btn>li").eq(num).attr("class","bianse").siblings().attr("class","");
})


// 轮播图左侧划过
$("#btn2").on("mouseenter","li",function(){
	$("#huaGuo>div").eq($(this).index()).slideDown(200).siblings().slideUp(200);
	$("#huaGuo>div").eq($(this).index()).on("mouseleave",function(){
		$(this).slideUp(200);
	})
})
$("#leftLan").on("mouseleave",function(){
	$("#huaGuo>div").slideUp(200);
})


// 搜索时发生的事件
$(".txt1").on("focus",function(){
	$(".pp1").show();
})
$(".txt1").on("blur",function(){
	$(".pp1").hide();
})


// ajax请求
// 省市二级联动
var baseURL = "http://localhost:8888";
$.get(baseURL+"/city",function(data){
	var data1 = data['城市代码'];
    for (var i = 0; i < data1.length; i++) {
    	$("<option></option>").appendTo(".sou .aa").html(data1[i]["省"]).val(i);
    };
    var num;
    $(".sou .aa").on("change",function(){
    	num = $(this).val();
    	$(".sou .bb>option").eq(0).siblings().remove();
    	for(var j = 0; j < data1[num]["市"].length; j++){
            $("<option></option>").appendTo(".sou .bb").html(data1[num]["市"][j]['市名']);
    	}
    })
});


// 左侧数据栏头部
$(".btn3 li").click(function(){
	$(this).attr("class","teshu").siblings("li").attr("class","");
})


// 获取页面数据
var num2 = 0;
function shuju(k){
	var n = parseInt(k/2)+1;  //将li的下标转换为URL的路径
	$.get(baseURL+"/"+n,function(data){	
		var data = data["shop_data"];
		// console.log(data);
		// 判断数据是从第几项开始的,因为提供的数据一页有十项,而页面一页只需要五项
		if(k % 2 == 0){
			var a = 0;
			var b = 5;
		}else{
			var a = 5;
			var b = 10;
		}
		// 渲染页面
		for(let i = a; i < b; i++){
			var div = $("<div></div>").appendTo('.zuo .shuJu').attr("class","tiao");
			var p1 = $("<p></p>").appendTo(div);
			var img1 = $("<img/>").appendTo(p1).attr("src",data[i]["shop_ico"]);
			var ul1 = $("<ul></ul>").appendTo(div).attr("class","ul1");
			var li1 = $("<li></li>").appendTo(ul1).html("店铺等级:"+data[i]["level"]);
			var a1 = $("<a href='#'></a>").prependTo(li1).html(data[i]["shop_name"]);
			var li2 = $("<li></li>").appendTo(ul1).html("主营："+data[i]["main"]);
			var li3 = $("<li></li>").appendTo(ul1).html("地址："+data[i]["addr_detail"]);
			var ul2 = $("<ul></ul>").appendTo(div).attr("class","ul2");
			var li4 = $("<li></li>").appendTo(ul2).html(" 先行赔付");
			var img2 = $("<img src='img/a27.png'/>").prependTo(li4);
			var li5 = $("<li></li>").appendTo(ul2).html(" 同城帮认证");
			var img2 = $("<img src='img/a28.png'/>").prependTo(li5);
			var li6 = $("<li></li>").appendTo(ul2).html("人气："+data[i]['shop_visit']+"次浏览");
		}
		$(".shuJu .tiao").eq(4).css("border","none");
		$(".shuJu .tiao").on("mouseenter",function(){
			$("<button></button>").appendTo($(this)).html("进入店铺");
			$(this).css("background","#f6f6f6");
		})
		$(".shuJu .tiao").on("mouseleave",function(){
			$(".tiao button").remove();
			$(this).css("background","white");
		})
	})
}
shuju(num2);


// 切换数据的按钮
$(".btn4 li").on("click",function(){
	num2 = $(this).index();
	$(".shuJu .tiao").remove();
	$(this).attr("class","orange").siblings().attr("class","");
	shuju(num2);
})
$(".btn4 p").on("click",function(){
	num2++;
	if(num2<6){
        $(".shuJu .tiao").remove();
	    $(".btn4 li").eq(num2).attr("class","orange").siblings().attr("class","");
	    shuju(num2);
	}else{
		alert("已经没有数据!!!")
	}	
})

// 数据排行
var data3;
function shuju2(){
	$.get(baseURL+"/6",function(data){
		var data2 = data["shop_data"];
		data3 = data["shop_data"];
		// 按评论条数截取数据
		data2 = data2.sort(compare("comments")).slice(0,7);
		console.log(data2)
		// 渲染页面2
		for(let t = 0; t < data2.length; t++){
			var div2 = $("<div/>").appendTo($(".you")).attr("class","tiao2");
			var xx1 = $("<div/>").appendTo(div2).attr("class","xx1").html(1+t);
			var xx2 = $("<div/>").appendTo(div2).attr("class","xx2");
			var imgg = $("<img/>").appendTo(xx2).attr("src",data2[t]["shop_ico"]);
			var xx3 = $("<div/>").appendTo(div2).attr("class","xx3");
            var aa1 = $("<a href='#'></a>").appendTo(xx3).html(data2[t]["shop_name"]);
            var pp1 = $("<p/>").appendTo(xx3).html(data2[t]["comments"]+"条评论");
		}
		for(let e = 0; e < 3; e++){
			$(".xx1").eq(e).css({borderColor:"#fc6621",color:"#fc6621"});
		}
	})
} 
shuju2()

// 对象排序函数
var compare = function (prop){
	return function(obj1,obj2){
		var val1 = obj1[prop];
		var val2 = obj2[prop];
		if(!isNaN(Number(val1)) && !isNaN(Number(val2))){
			val1 = Number(val1);
			val2 = Number(val2);
		}
		if(val1 < val2){
			return 1;
		}else if(val1 > val2){
			return -1;
		}else{
			return 0;
		}
	}
}



// 回到顶部
function db(){
	document.onscroll = function(){
		var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
		if(scrollTop>30){
			$(".hddb").show();
		}else{
			$(".hddb").hide();
		}
	}
	$(".hddb").on("click",function(){
		document.body.scrollTop = 0;
	})
}
db();
